<template>
    <div>
        <!-- 面包屑组件 -->
    <breadcrumb :navData="navData"></breadcrumb>

    <el-table :data="rightsList" stripe>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="权限名称" prop="authName"></el-table-column>
    <el-table-column label="路径" prop="path"></el-table-column>
    <el-table-column label="权限等级" prop="level">
        <template slot-scope="scope"> 
            <el-tag v-if="scope.row.level == 0 " type="primary">一级权限</el-tag>
            <el-tag v-else-if="scope.row.level == 1" type="success">二级权限</el-tag>
            <el-tag v-else type="warning">三级权限</el-tag>
        </template>
    </el-table-column>
</el-table>
    </div>
</template>

<script>
export default {
  data() {
    return {
      navData: ["用户管理", "权限列表"],
      rightsList:[]
    }
  },
  created(){
      this.getRightsList();
  },
  methods:{
      async getRightsList(){
          const {data:res} =await this.$http.get('rights/list')
          if(res.meta.status !==200)
          return this.$message.error("获取权限列表失败")
          this.rightsList=res.data
          console.log(res.data);
      }
  }
};
</script>

<style lang="scss" scoped>
</style>